<template>  
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
    <div class="block avatar" :style="{backgroundImage: 'url(' + imgBg + ')'}">
      <div class="avatar-box">
        <img :src="imgSrc" alt="">
      </div>
      <div class="user-name">{{ userInfo.nickName }}</div>
    </div>
    <div class="block user-list">
      <mt-cell title="收藏中心" is-link :to="{path: '/userCollections'}"></mt-cell>
      <mt-cell title="我的订单" is-link :to="{path: '/userCollections'}"></mt-cell>
      <mt-cell title="个人资料" is-link :to="{path: '/userCollections'}"></mt-cell>
    </div>
    <div class="login-out">
      <mt-button type="primary" size="small" @click="loginOut">退出登录</mt-button>
    </div>
  </div>  
</template>  
<script> 
  export default {  
    data:function() {  
      return {   
        scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
        imgSrc: require('../../../static/img/timg.jpg'),
        imgBg: require('../../../static/img/bg1.jpg'),
        userInfo: []
      }  
    },
    mounted () {
      this.isLogin();//判断登录
      var userInfo = JSON.parse(this.getItemStorange("userInfo"));
      if(userInfo.loginSta) {
        this.userInfo = userInfo;
      } else {
        this.$router.push('/login');
      }
    },
    methods: {
      loginOut () {
        this.userInfo.loginSta = false;
        this.setItemStorange("userInfo", JSON.stringify(this.userInfo));
        this.$router.push('/');
      }
    }
  }
</script>

<style lang="less">
  @import url('../../../static/var');

  .avatar {
    padding: 3.5rem 0 3rem;
    background-size: 100% auto;
    text-align: center;
    font-size: @f16;
    color: @bg-col-fff;
    margin-bottom: 10px;
  }
  .avatar-box {
    .box(80px, 80px);
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .85);
  }
  .user-name {
    margin-top: 5px;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5)
  }
  .user-list {
    .mint-cell {
      min-height: 40px;
    }
    .mint-cell-wrapper {
      padding: 0;
      background-image: -webkit-linear-gradient(top, @col-e2, @col-e2 50%, transparent 50%);
      background-image: linear-gradient(180deg, @col-e2, @col-e2 50%, transparent 50%);
    }
    .mint-cell-text {
      font-size: @f12;
      padding-left: 15px;
    }
  }
  .login-out {
    margin-top: 30px;
    padding: 10px;
    button {
      width: 100%;
    }
  }
</style>